<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03 常用鼠标事件</title>
</head>

<body>
    <div class="box">
        box
    </div>

    <script>
        // onmouseover  鼠标移到某元素之上
        // onmouseout      鼠标从某元素移开
        box.onmouseover = function() {
            box.classList.add('active');
        }

        box.onmouseout = function() {
            box.classList.remove('active');
        }

        box.onmousemove = function() {
            console.log('移动');
        }

        // oncontextmenu  在用户点击鼠标右键打开上下文菜单时触发

        document.oncontextmenu = function(event) {
            console.log('点击右键');
            event.preventDefault(); //阻止默认事件
        }

        // onwheel 事件在鼠标滚轮在元素上下滚动时触发

        varbody = document.querySelector('body');
        body.onwheel
    </script>
</body>

</html>